<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header>
      <Header></Header>
    </el-header>
    <!--下部-->
    <!-- 页面主体区域 -->
    <el-main style="padding: 0 15px;">
      <!--右边-->
      <!--搜索和随机推荐开始-->
      <div class="aside">
        <div style="width: 280px;height: 123.67px; background-color: #00AC84;"></div>
        <div class="widgets">
          <h4>搜索</h4>
          <div class="body search">
            <form>
              <input type="text" class="keys" clearable v-model="keys" placeholder="输入关键字">
              <input type="button" class="btn randTitle" @click="toSelect" value="搜索">
            </form>
          </div>
        </div>
        <div class="widgets">
          <el-tag type="success">
            <h2>随机推荐</h2>
          </el-tag>
          <ul class="body random">
            <li v-for="item in rand" :key="item.houseid">
              <div class="randleft">
                <p class="randTitle" @click="toInfo(item.houseid)">{{item.housetitle}}</p>
                <p class="reading">{{item.htype}}</p>
                <p><span><b class="price">{{item.houseprice}}</b></span>万元/㎡</p>
              </div>
              <div class="pic randright">
                <img :src="item.imgurl" alt="" @click="toInfo(item.houseid)">
              </div>
            </li>
          </ul>
        </div>
        <!--搜索和随机推荐结束-->
        <div class="widgets">
          <el-tag type="success">
            <h2>收藏推荐</h2>
          </el-tag>
          <ul class="body discuz">

            <li>
              <a href="javascript:;">
                <div class="avatar">
                  <img src="../assets/images/avatar_1.jpg" alt="">
                </div>
                <div class="txt">
                  <p>
                    <span>鲜活</span>2020-02-01说:
                  </p>
                  <p>挺会玩的</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!--搜索和随机推荐结束-->

      <!--中间部分-->
      <div class="content">
        <!-- 路由占位符 -->
        <router-view></router-view>
      </div>
      <!--下面热门推荐结束-->

    </el-main>
    <!--中间主体结束-->
  </el-container>
</template>

<!-- <script>
  import jquery from '../assets/vendors/jquery/jquery.js'
  export default jquery
</script> -->

<script>
  import Header from '../components/main/Header.vue' //导入头部
  export default {
    components: {
      Header
    },
    data() {
      return {
        rand: '', //随机推荐
        keys: '' //搜索的关键词
      }
    },
    created() {
      this.getRand(); //获取主页随机数据
    },
    methods: {
      //获取主页随机数据
      async getRand() {
        const {
          data: res
        } = await this.$axios.get('HouseController/findByField.action?num=2')
        console.log(res)
        if (!res) return this.$message.error('未查询到数据！')
        this.rand = res.rand; //随机推荐
      },
      //去详情页
      toInfo(id) {
        window.sessionStorage.removeItem("active");
        //console.log(row);
        // 跳转到详情页并传指定id参数
        this.$router.push({
          path: '/houseInfo',
          query: {
            id: id
          }
        })
      },
      //关键词搜索去筛选页
      toSelect() {
        window.sessionStorage.setItem("active", '/selectNewHouse'); //头部筛选导航高亮
        // 跳转到筛选页并传关键词参数
        this.$router.push({
          path: '/selectNewHouse',
          query: {
            keys: this.keys
          }
        })
      }
    }
  }
</script>

<style scoped>
  /*下部样式*/
  @import url("../assets/css/style.css");
  @import url("../assets/vendors/font-awesome/css/font-awesome.css");
  @import url("../assets/vendors/nprogress/nprogress.css");

  /*最外部*/
  home-container {
    height: 100%;
  }

  /*  头部
  .el-header {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    align-items: center;
  } */
  .headerdiv {
    display: flex;
    align-items: center;
  }

  .headerdiv span {
    margin-left: 15px;
  }

  .headerdiv img {
    width: 80px;
    height: 60px;
  }

  /*主体区*/
  .el-main {
    background-color: #eaedf1;
  }

  .iconfont {
    margin-right: 10px;
  }

  .toggle-button {
    background-color: #4a5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }

  /*随机区*/
  .randleft {
    float: left;
    width: 50%;
    overflow: hidden;
    /* //超出的文本隐藏 */
    text-overflow: ellipsis;
    /* //溢出用省略号显示 */
    white-space: nowrap;
    /* //溢出不换行 */
  }

  .randright {
    float: right;
    width: 40%;
  }

  p {
    margin-top: 3px;
  }

  .randTitle {
    cursor: pointer;
  }

  .price {
    color: #fd4d39;
    font-size: 18px;
  }
</style>
